JQ插件概述
所谓的jquery插件,其实就是利用jquery语法,完成的一些工具或者模块.jquery插件是jQuery功能的扩展.可以让开发人员能更好更快速的完成某些特定的需求,只需要用很少的代码就能实现很好的效果。
自定义插件
JQ允许自定义插件,对JQ的方法进行扩展.自定义插件主要分两种: JQ元素扩展和JQ本身扩展.
JQ元素扩展:
方法: jQuery.fn.extend(object)
概述
扩展 jQuery 元素集来提供新的方法（通常用来制作插件）。
也就是说,该方法可以用来扩展JQ元素的用法
示例
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>JQuery插件机制-jQuery.fn.extend(object)</title> <script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="./js/jquery.min.js"></script></head><body> <div> 爱好:<input type="checkbox" name="hobby" value="basketball" /> 篮球 <input type="checkbox" name="hobby" value="Football" />足球 <input type="checkbox" name="hobby" value="Volleyball" />排球 <br /> 用户名:<input type="text" name="username" /><br /> </div> <script type="text/javascript"> $.fn.extend({ check: function() { // 扩展一个check方法，该方法是将所有的多选按钮全部选中 this.each(function() { this.checked = true; }); }, userNameText: function() { // 自定义一个userNameText方法，该方法的功能是:将文本框自动赋值,并且字体颜色变为灰色 this.each(function() { this.style.color = "gray"; this.value = "请输入用户名"; }); } }); //注：如果是加上标签内的属性则需要写在[]内 具体使用如下所示 // $("input[type=checkbox]").check(); //将type等于checkbox的多选框全部选中 $("input[name=hobby]").check(); //将name等于hobby的多选框全部选中 $("input[type=text]").userNameText(); //将type等于text的所有文本框自动赋值,并且字体颜色变为灰色 </script></body></html>
JQ本身扩展:
方法: jQuery.extend(object)
概述
扩展jQuery对象本身,用来在jQuery命名空间上增加新函数
简单来说就是增加全局函数,也就是 $.函数()
示例
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>JQuery插件机制-jQuery.extend(object)</title> <script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="./js/jquery.min.js"></script></head><body> <script type="text/javascript"> $.extend({ plus: function(a, b) { return a + b; }, // 给$扩展一个plus方法,用于求两个数的和. minus: function(a, b) { return a - b }, // 给$扩展一个minus方法,用于求两个数的差. multiply: function(a, b) { return a * b }, // 给$扩展一个plus方法,用于求两个数的乘积. max: function(a, b) { return a > b ? a : b; } // 给$扩展一个plus方法,用于求两个数的最大值. }); alert($.plus(2, 3)); //结果5 alert($.minus(2, 3)); //结果-1 alert($.multiply(2, 3)); //结果6 alert($.max(2, 3)); //结果3 </script></body></html>
注意事项:
因为所做插件为JQ插件,使用的语法也都是JQ的语法,所以,无论在自定义插件或者使用别人定义好的插件的时候,都要求先引入JQ的js文件,才能正常的使用,切记.
点击查看更多内容
为 TA 点赞
评论
共同学习，写下你的评论
评论加载中...
作者其他优质文章
正在加载中
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦